<template>
<div class="card_box">
  <el-card>
    <chart :options="pie" auto-resize ref="chart" @mouseover="enterPie" @mouseout="outPie"/>
  </el-card>
</div>
</template>

<script>
export default {
  name: 'rechargeCard',
  data() {
    return {
      listLoading: false,
      finished: 1,
      unfinished: 1,
      preSelect: true,
      pie: {
        title: {
          text: '充值金额',
          subtext: '总充值金额: 12,668'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          selectedMode: false,
          itemWidth: 20,
          x: 'center',
          y: 'bottom',
          data: ['总消费总额', '总余额总额']
        },
        series: [
          {
            name: '消费情况',
            type: 'pie',
            radius: ['50%', '65%'],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '24',
                  fontWeight: 'bold'
                },
                // formatter: "{b}:\n{d}%"
                formatter: [
                  '{title|{b}}',
                  '{num|{c}({d}%)}'
                ].join('\n'),
                rich: {
                  title: {
                    color: '#c23531',
                    fontSize: 24,
                    fontWeight: 'bold'
                  },
                  num: {
                    color: '#91c7ae',
                    fontSize: 16,
                    lineHeight: 24
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.$refs.chart.showLoading()
    this.filEchartData()
  },
  methods: {
    filEchartData() {
      this.$refs.chart.mergeOptions({
        series: [{
          // name: '完成情况',
          data: [
            { value: '10', name: '总消费总额' },
            { value: '20', name: '总余额总额' }
          ]
        }]
      })
      this.$refs.chart.hideLoading()
      this.$refs.chart.dispatchAction({
        type: 'highlight',
        name: '总消费总额'
      })
    },
    enterPie(val) {
      if (val.name === '总余额总额') {
        this.downplayHighlight()
      } else {
        return
      }
      // console.log(val)
    },
    downplayHighlight() {
      this.$refs.chart.dispatchAction({
        type: 'downplay',
        name: '总消费总额'
      })
    },
    outPie(val) {
      this.highlightUnCompleted()
    },
    highlightUnCompleted() {
      this.$refs.chart.dispatchAction({
        type: 'highlight',
        name: '总消费总额'
      })
    }
  },
  computed: {
  }
}
</script>

<style scoped>
.card_box {
  width: 100%;
  margin-left: 20px;
  padding-bottom: 30px;
}
</style>